<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改签管理 - 铁路管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/admin/css/styles.css">
    <style>
        #app {
            display: flex;
            min-height: 100vh;
            width: 100%;
        }

        .status-pending {
            color: #ff9800;
            font-weight: 500;
        }

        .status-approved {
            color: #43a047;
            font-weight: 500;
        }

        .status-rejected {
            color: #e53935;
            font-weight: 500;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #e0e0e0;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }

        .close-btn:hover {
            background-color: #f5f5f5;
        }

        .required {
            color: #e53935;
        }

        .no-data {
            text-align: center;
            padding: 40px 0;
            color: #999;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- 主内容区 -->
    <div class="main-content">


        <!-- 页面内容区域 -->
        <div id="page-content" style="padding: 0 20px;">
            <!-- 搜索区域 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 class="card-title">改签查询</h3>
                </div>
                <div class="card-body">
                    <form class="form-row" @submit.prevent="search">
                        <div class="form-group col-3">
                            <label for="changeId">改签ID</label>
                            <input type="text" v-model="searchForm.changeId" class="form-control"
                                   placeholder="请输入改签ID">
                        </div>
                        <div class="form-group col-3">
                            <label for="orderId">订单ID</label>
                            <input type="text" v-model="searchForm.orderId" class="form-control"
                                   placeholder="请输入订单ID">
                        </div>
                        <div class="form-group col-3">
                            <label for="username">用户姓名</label>
                            <input type="text" v-model="searchForm.username" class="form-control"
                                   placeholder="请输入用户姓名">
                        </div>
                        <div class="form-group col-3">
                            <label for="status">状态</label>
                            <select v-model="searchForm.status" class="form-control">
                                <option value="">全部</option>
                                <option value="0">待审核</option>
                                <option value="1">已通过</option>
                                <option value="2">已拒绝</option>
                            </select>
                        </div>
                        <div class="form-group col-12" style="margin-top: 20px;">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 改签列表 -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">改签列表</h3>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>改签ID</th>
                                <th>订单ID</th>
                                <th>用户姓名</th>
                                <th>原车次</th>
                                <th>新车次</th>
                                <th>出发站</th>
                                <th>到达站</th>
                                <th>改签费用</th>
                                <th>申请时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in paginatedData" :key="item.changeId">
                                <td>{{ item.changeId }}</td>
                                <td>{{ item.orderId }}</td>
                                <td>{{ item.username }}</td>
                                <td>{{ item.originalTrainNumber }}</td>
                                <td>{{ item.newTrainNumber }}</td>
                                <td>{{ item.startStation }}</td>
                                <td>{{ item.endStation }}</td>
                                <td>¥{{ item.changeFee }}</td>
                                <td>{{ formatDateTime(item.applyTime) }}</td>
                                <td>
                                    <span v-if="item.status === 0" class="status-pending">待审核</span>
                                    <span v-else-if="item.status === 1" class="status-approved">已通过</span>
                                    <span v-else class="status-rejected">已拒绝</span>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="btn btn-sm btn-primary" @click="handleDetail(item)">
                                            <i class="fas fa-eye"></i> 详情
                                        </button>
                                        <button class="btn btn-sm btn-success" @click="handleApprove(item.changeId)" v-if="item.status === 0">
                                            <i class="fas fa-check"></i> 通过
                                        </button>
                                        <button class="btn btn-sm btn-danger" @click="handleReject(item.changeId)" v-if="item.status === 0">
                                            <i class="fas fa-times"></i> 拒绝
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!-- 无数据提示 -->
                        <div v-if="tableData.length === 0" class="no-data">
                            <p>暂无数据</p>
                        </div>
                    </div>

                    <!-- 分页控件 -->
                    <div class="pagination" v-if="totalItems > 0"
                         style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
                        <button class="btn btn-sm" :disabled="currentPage === 1" @click="prevPage">&laquo;</button>
                        <span class="page-info" style="margin: 0 10px;">
                            第 {{ startIndex + 1 }}-{{ endIndex }} 条，共 {{ totalItems }} 条
                        </span>
                        <div class="page-numbers" style="display: flex; margin: 0 10px;">
                            <button v-for="page in pages" :key="page" class="btn btn-sm"
                                    :class="{ 'btn-primary': page === currentPage }" @click="goToPage(page)">
                                {{ page }}
                            </button>
                        </div>

                        <button class="btn btn-sm" :disabled="currentPage === totalPages" @click="nextPage">&raquo;
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 详情模态框 -->
    <div v-if="isDetailVisible" class="modal-overlay" @click.self="closeDetail">
        <div class="modal">
            <div class="modal-header">
                <h3>改签详情</h3>
                <button class="close-btn" @click="closeDetail">&times;</button>
            </div>
            <div class="modal-body" v-if="currentChangeItem">
                <div class="form-row">
                    <div class="form-group col-6">
                        <label>改签ID</label>
                        <input type="text" class="form-control" :value="currentChangeItem.changeId" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>订单ID</label>
                        <input type="text" class="form-control" :value="currentChangeItem.orderId" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>用户姓名</label>
                        <input type="text" class="form-control" :value="currentChangeItem.username" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>用户ID</label>
                        <input type="text" class="form-control" :value="currentChangeItem.userId" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>原车次</label>
                        <input type="text" class="form-control" :value="currentChangeItem.originalTrainNumber" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>新车次</label>
                        <input type="text" class="form-control" :value="currentChangeItem.newTrainNumber" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>出发站</label>
                        <input type="text" class="form-control" :value="currentChangeItem.startStation" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>到达站</label>
                        <input type="text" class="form-control" :value="currentChangeItem.endStation" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>原票价</label>
                        <input type="text" class="form-control" :value="'¥' + currentChangeItem.originalPrice" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>新票价</label>
                        <input type="text" class="form-control" :value="'¥' + currentChangeItem.newPrice" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>改签费用</label>
                        <input type="text" class="form-control" :value="'¥' + currentChangeItem.changeFee" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>申请时间</label>
                        <input type="text" class="form-control" :value="formatDateTime(currentChangeItem.applyTime)" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>处理时间</label>
                        <input type="text" class="form-control" :value="formatDateTime(currentChangeItem.processTime)" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>状态</label>
                        <input type="text" class="form-control" :value="getStatusText(currentChangeItem.status)" disabled>
                    </div>
                    <div class="form-group col-6">
                        <label>处理人</label>
                        <input type="text" class="form-control" :value="currentChangeItem.processBy" disabled>
                    </div>
                    <div class="form-group col-12">
                        <label>改签原因</label>
                        <textarea class="form-control" rows="3" :value="currentChangeItem.reason" disabled></textarea>
                    </div>
                    <div class="form-group col-12">
                        <label>处理备注</label>
                        <textarea class="form-control" rows="3" :value="currentChangeItem.remark" disabled></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @click="closeDetail">关闭</button>
            </div>
        </div>
    </div>
</div>
<script src="/admin/js/auth.js"></script>
<script src="/admin/js/jquery-3.6.0.js"></script>
<script src="/admin/js/vue.js"></script>
<script src="/admin/js/load-navbar.js"></script>
<script src="/admin/js/user-info.js"></script>
<script src="/admin/js/axios.js"></script>
<script src="/admin/js/config.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            searchForm: {
                changeId: '',
                orderId: '',
                username: '',
                status: ''
            },
            tableData: [],
            isDetailVisible: false,
            currentChangeItem: null,
            userName: '',
            // 分页相关数据
            currentPage: 1,
            pageSize: 8,
            totalItems: 0,
            useFrontendPagination: false
        },
        computed: {
            // 计算总页数
            totalPages() {
                return Math.ceil(this.totalItems / this.pageSize);
            },
            // 当前页显示的数据
            paginatedData() {
                // 如果使用前端分页，则对全部数据进行分页
                // 否则，直接使用后端返回的当前页数据
                if (this.useFrontendPagination) {
                    const start = (this.currentPage - 1) * this.pageSize;
                    const end = start + this.pageSize;
                    return this.tableData.slice(start, end);
                } else {
                    // 后端已分页的情况下，直接返回当前页数据
                    return this.tableData;
                }
            },
            // 显示的页码范围
            pages() {
                const pages = [];
                const maxVisiblePages = 5; // 最多显示5个页码
                let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2));
                let endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1);
                if (endPage - startPage < maxVisiblePages - 1) {
                    startPage = Math.max(1, endPage - maxVisiblePages + 1);
                }
                for (let i = startPage; i <= endPage; i++) {
                    pages.push(i);
                }
                return pages;
            },
            // 当前页起始索引
            startIndex() {
                return (this.currentPage - 1) * this.pageSize;
            },
            // 当前页结束索引
            endIndex() {
                const end = this.startIndex + this.pageSize;
                return Math.min(end, this.totalItems);
            }
        },
        methods: {
            search() {
                this.currentPage = 1; // 搜索时重置到第一页
                this.loadData();
            },
            handleDetail(item) {
                this.currentChangeItem = item;
                this.isDetailVisible = true;
            },
            closeDetail() {
                this.isDetailVisible = false;
                this.currentChangeItem = null;
            },
            handleApprove(changeId) {
                if (confirm('确定要通过该改签申请吗？通过后将为用户办理改签。')) {
                    axios.post(`/admin/change_manage/approve/${changeId}`)
                        .then(resp => {
                            if (resp.data.code === 200) {
                                alert('操作成功');
                                this.loadData(); // 重新加载数据
                            } else {
                                alert('操作失败: ' + resp.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('操作请求失败:', error);
                            alert('操作失败，请重试');
                        });
                }
            },
            handleReject(changeId) {
                const remark = prompt('请输入拒绝原因：');
                if (remark === null) return; // 用户取消

                if (confirm('确定要拒绝该改签申请吗？')) {
                    axios.post('/admin/change_manage/reject', { changeId, remark })
                        .then(resp => {
                            if (resp.data.code === 200) {
                                alert('操作成功');
                                this.loadData(); // 重新加载数据
                            } else {
                                alert('操作失败: ' + resp.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('操作请求失败:', error);
                            alert('操作失败，请重试');
                        });
                }
            },
            // 分页方法
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.loadData();
                }
            },

            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.loadData();
                }
            },

            goToPage(page) {
                this.currentPage = page;
                this.loadData();
            },

            loadData() {
                axios.get("/admin/change_manage/getList", {
                    params: {
                        page: this.currentPage,
                        pageSize: this.pageSize,
                        changeId: this.searchForm.changeId || null,
                        orderId: this.searchForm.orderId || null,
                        username: this.searchForm.username || null,
                        status: this.searchForm.status || null
                    }
                })
                    .then(resp => {
                        if (resp.data.code === 200) {
                            this.tableData = resp.data.data.list || [];
                            this.totalItems = resp.data.data.total || 0;
                        } else {
                            alert("加载数据失败: " + resp.message);
                            this.tableData = [];
                            this.totalItems = 0;
                        }
                    })
                    .catch(error => {
                        console.error('加载数据失败:', error);
                        alert('加载数据失败，请重试');
                    });
            },

            formatDateTime(dateTime) {
                if (!dateTime) return '';
                const date = new Date(dateTime);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },

            getStatusText(status) {
                if (status === 0) return '待审核';
                if (status === 1) return '已通过';
                if (status === 2) return '已拒绝';
                return '';
            }
        },
        mounted() {
            // 加载改签列表
            this.loadData();
            // 设置当前页面标识
            sessionStorage.setItem('currentPage', 'change_manage.html');
        }
    });
</script>
</body>
</html>
